<template>
	<div class="w-page w-thank">
		<!-- 头部 -->
		<Header navNum="5" @isSearch='isSearch'></Header>
		<!-- 内容 -->
		<div class="conbox" v-if="!isSearchList">
			<div class="w-width">
				<!-- 正文内容开始 -->
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<!-- 左侧开始 -->
						<Leftcard class="w-card-left shrink0" :isBackHome="isBackHome" :deAcBig='acBig' :deAcSml='deAcSml' :menuList="menuList" :columnName="columnName" @aa="out"></Leftcard>
						<!-- 左侧结束 -->
						<div class="tabCon" >
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item :to="{}"><span @click="acBig = '0'; isBackHome = true">{{ columnName }}</span></el-breadcrumb-item>
                  <el-breadcrumb-item :to="{}"><span @click="isdetail = 0">{{ title }}</span></el-breadcrumb-item>
                  <el-breadcrumb-item :to="{}" v-if='title2'><span @click="isdetail = 0">{{ title2 }}</span></el-breadcrumb-item>
									<el-breadcrumb-item v-if="isdetail == 1">详情</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div class="w-mainhtml" v-if="isdetail==0">
								<div class="w-tabtitle" v-if="title2==''">{{title}}</div>
								<div class="w-tabtitle" v-else>{{title2}}</div>
								<div v-if="classId==0">
									<el-table :data="tableData" stripe style="width: 100%; margin-bottom: 30px;">
										<el-table-column prop="name" label="捐赠方" min-width="180" align="center">
										</el-table-column>
										<el-table-column prop="projectTitle" label="捐赠项目" min-width="150" align="center">
										</el-table-column>
                    <el-table-column label="捐赠时间" min-width="120" align="center">
                      <template slot-scope="scope">
                        <span>{{ scope.row.createDate.split(' ')[0] }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column class="w-donate" label="捐赠金额(元) / 捐赠其他" min-width="150" align="center" :show-overflow-tooltip="true">
                      <template slot-scope="scope">
                        <p class="w-donate-text">
                          <span v-if="scope.row.donate">{{ formatMoney(scope.row.donate) }}</span><span v-if="scope.row.donate && scope.row.goods"> / </span><span v-if="scope.row.goods">{{ scope.row.goods }}</span>
                        </p>
                      </template>
                    </el-table-column>
									</el-table>

                  <el-pagination @current-change="handleCurrentChangeDonater" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
                                 :total="total">
                  </el-pagination>
								</div>
								<div v-else>
									<div class="w-con">
                    <div class="w-commonList">
                      <ul class="w-tabul">
                        <li v-for="(v,i) in List" :key="i" @click="getDetail(v.id)">
                          <div class="w-a flex hs vc">
                            <p class="dian shrink0"></p>
                            <p class="w-text ellipsis">
                              <span>{{ v.con }}</span>
                            </p>
                          </div>
                          <div class="w-time">
                            <span>{{ v.createTime.split(' ')[0] }}</span>
                          </div>
                        </li>
                      </ul>
                    </div>
<!--										<CommonList :List="List" @sendId='sendId'></CommonList>-->
										<el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
										 :total="total">
										</el-pagination>
									</div>
								</div>
							</div>
							<!-- 详情开始 -->
							<detailPage v-if="isdetail==1" :info='info'></detailPage>
							<!-- 详情结束 -->
						</div>
					</div>
				</div>
				<!-- 正文内容 结束 -->
			</div>
		</div>
		<!-- 底部开始 -->
		<Footer></Footer>
		<!-- 底部结束 -->
	</div>
</template>

<script>
	import detailPage from "./common/detail"
	import {
		donateList
	} from '@/api/donate' //捐赠者列表
	import {
		articleClassList,
		articleDetail
	} from '@/api/article'
  import { formatMoney } from "../utils/formatMoney"

	export default {
		components: {
			"detailPage": detailPage
		},
		data() {
			return {
				isdetail: 0,
				columnName: '捐赠鸣谢',
				title: '',
				title2: '',
				acBig: '',
				acSml:'',
				// showId: '',
				menuList: [{
						id: 1,
						name: '捐赠展示',
						ischildren: false,
						children: [{
								id: '1',
								name: "捐赠者列表",
								apiId: 0,
							},
							// {
							// 	id: '2',
							// 	name: "捐赠者介绍",
							// 	apiId: 12,
							// },
							{
								id: '3',
								name: "捐赠者故事",
								apiId: 17,
							}
						]
					},
					{
						id: 2,
						name: '受益者感言',
						ischildren: false,
						apiId: 10,
					},
					{
						id: 3,
						name: '志愿者风采',
						ischildren: false,
						apiId: 11,
					},
				],
				tableData: [],
				// 列表
				List: [],
				size: 15,
				page: 1,
				total: 0,
				classId: 0,
				// 详情
				isdetail: 0,
				info: {},
				deAcBig: "",
				deAcSml: "",
				isFirst: true,
				isSearchList: false,
        isBackHome: false
			};
		},

		created() {
      if (this.$route.query.deAcBig) {
        this.acBig = this.$route.query.deAcBig.toString()
        this.deAcSml = this.$route.query.acSml || '1'
        this.changeMenu()
      }

			this.isSearch()
			this.sendId()

      // if(this.$route.query.deAcBig&&this.$route.query.deAcSml&&this.isFirst==true){
			// 	this.isFirst=false
			// 	this.acBig =this.$route.query.deAcBig.toString()
			// 	this.deAcBig =this.$route.query.deAcBig.toString()
			// 	this.acSml =this.$route.query.deAcSml.toString()
			// 	this.deAcSml =this.$route.query.deAcSml.toString()
			// }
		},

    watch: {
      $route () {
        this.acBig = this.$route.query.deAcBig
        this.deAcSml = this.$route.query.acSml || '1'

        this.out(JSON.stringify({
          acBig: this.acBig,
          acSml: this.deAcSml
        }))

        this.changeMenu()
      }
    },

		mounted(){
			if(this.$route.query.detailId){
				this.getDetail(this.$route.query.detailId)
			}
		},

		methods: {
      formatMoney(money) {
        return formatMoney(money)
      },

			isSearch(data){
				this.isSearchList = data
			},

			// 捐赠者表格
			getDonater() {
				donateList({
					page: this.page,
          size: this.size
				}).then(response => {
					this.tableData = response.data.list
          this.total = response.data.total
				})
			},

			out(data) {
        var _this = this;
        if (data) {
					_this.page = 1
					_this.isdetail = 0
					var data = JSON.parse(data)
					_this.acBig = data.acBig.toString()
					_this.acSml = data.acSml

          _this.$router.replace({
            path: '/donation_thank',
            query: {
              deAcBig: parseInt(_this.acBig),
              acSml: parseInt(_this.acSml || '1')
            }
          }).catch(err => {})
				}

				this.isBackHome = false
			},

      changeMenu() {
        let _this = this

        _this.menuList.forEach((value, index) => {
          if (parseInt(value.id) === parseInt(_this.acBig)) {
            _this.title = value.name
            if (!value.children) { //无子
              _this.title2 = ""
              _this.classId = value.apiId
            } else {
              value.children.forEach((a, b) => {
                if (parseInt(_this.acSml) === parseInt(a.id)) {
                  console.log(a)
                  _this.title2 = a.name
                  _this.classId = a.apiId
                }
              })
            }
          }
        })
        if (_this.classId == 0) {
          _this.getDonater()
        } else {
          _this.getList()
        }
      },

			getList() {
				articleClassList({
					classId: this.classId,
					size: this.size,
					page: this.page,
				}).then(response => {
					this.List = response.data.list
					this.total = response.data.total
					this.List.forEach(v => {
						v.con = v.title
					})
				})
			},

      // 分页
      handleCurrentChangeDonater(currentPage) {
        this.page = currentPage;
        this.getDonater()
      },

			// 分页
			handleCurrentChange(currentPage) {
				this.page = currentPage;
				this.getList()
			},

			sendId(data) {
				if (data) {
					this.getDetail(data)
				}
			},

			getDetail(id){
        this.info = {}
				this.isdetail = 1
				console.log(this.isdetail)

				articleDetail({
					id: id,
				}).then(response => {
					this.info = response.data
				})
			}
		}
	};
</script>

<style>
  .el-tooltip__popper {
    max-width: 500px;
  }
</style>

<style scoped>
  /* li */
  .w-tabul {
    margin-bottom: 30px;
    box-sizing: border-box;
    min-height: 24.5vh;
  }

  .w-tabul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1PX dotted #999;
    cursor: pointer;
  }

  .w-tabul .w-time {
    font-size: 16px;
    color: #333333;
  }

  .w-tabul .w-a {
    width: 75%;
    font-size: 16px;
    color: #333333;
    padding: 18px 0 18px 9px;
    box-sizing: border-box;
  }

  .w-tabul .dian {
    width: 6px;
    height: 6px;
    background: rgba(102, 102, 102, 1);
    border-radius: 50%;
    margin-right: 13px;
  }

  .w-text {
    width: calc(90% - 70px);
  }
</style>

<style scoped>
	.w-tabcon p {
		text-indent: 30px;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 2;
		margin-bottom: 20px;
		text-align: justify;
	}

	.w-tabcon img {
		display: block;
		max-height: 334px;
		max-width: 420px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 40px;
	}
</style>
<style scoped>
	/* 公共css */
	.w-card {
		background: #fff;
	}

	.w-card-left {
		width: 26%;
	}

	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 74%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-width {
		width: 70%;
		padding-top: 15px;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
</style>
<style>
	/* 面包屑 */
	.w-page .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-page .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}

	.w-page.el-breadcrumb__inner a:hover,
	.el-breadcrumb__inner.is-link:hover {
		color: #692324;
	}

	/* table修改样式 */
	.w-thank .el-table__header .has-gutter tr {
		background: #B47873;
		color: #fff;
	}

	.w-thank .el-table th {
		background: #B47873;
	}

	.w-thank .el-table--striped .el-table__body tr.el-table__row--striped td {
		background: #F5EEEE;
	}

	.w-thank .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #fff;
	}

	.w-thank .el-table--striped .el-table__body tr.el-table__row--striped td {
		background: #F5EEEE;
	}

	.w-thank .el-table th>.cell {
		/*padding-left: 90px;*/
	}

	.w-thank .el-table .cell {
		/*padding-left: 90px;*/
	}

	.w-thank .el-table td {
		border: none;
	}

	.w-thank .el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		display: none;
	}

	.w-thank .el-pager li {
		border: 1PX solid #9C9A9B;
		margin: 0 7px;
		font-size: 14px;
		font-weight: 300;
		border-radius: 3px;
	}

	.w-thank .el-pager li.active+li {
		border: 1PX solid #9C9A9B;
	}

	.w-thank .el-pager li.active {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-thank .el-pager li:hover {
		background: #791C1C;
		color: #fff;
		border: 1PX solid #791C1C;
	}

	.w-thank .el-pagination {
		text-align: center;
	}
</style>
